<template>
  <div class="app-container">
    <div class="search">
      <p class="float-left mr-10 mb-10" style="width: 200px">
        <el-input v-model="searchParams.name" placeholder="输入名称"></el-input>
      </p>
      <p class="float-left mr-10 mb-10">
        <el-button type="primary" @click="searchMenu(true)">搜索</el-button>
        <el-button type="primary" @click="resetMenu">重置</el-button>
      </p>
    </div>
    <el-row :gutter="15">
      <!-- 菜单授权 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="7" style="margin-bottom: 10px">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">菜单目录</span>
          </div>
          <el-tree
            ref="tree"
            :props="tree.props"
            :data="tree.data"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            highlight-current
            accordion
          >
          </el-tree>
        </el-card>
      </el-col>
      <!--角色管理-->
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
             <el-button type="primary" @click="addMenu">新增菜单</el-button>
          </div>
          <bdTable :tableHeader="tableHeader" :tableData="tableData" class="mb-10" />
          <bd-page
            :pageSize="pages"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></bd-page>
        </el-card>
      </el-col>
    </el-row>
    <addMenuAndEditMenu ref="menuInfo" @update:visible="resetMenuAndTree" />
  </div>
</template>
<script>
import { queryPermissionTree, menuPage, deleteMenu } from '@/api/menus'
import addMenuAndEditMenu from './addMenuAndEditMenu'
import _ from 'lodash'
export default {
  name: '',
  components: {
    addMenuAndEditMenu
  },
  data () {
    return {
      searchParams: {
        name: null,
        pId: null
      },
      tree: {
        data: [],
        props: {
          label: 'name',
          children: 'children'
        }
      },
      tableHeader: {
        type: 'selection',
        header: [
          {
            prop: 'pname',
            label: '上级菜单',
            filter: (row) => {
              return row?.pname || '一级菜单'
            }
          },
          {
            prop: 'name',
            label: '菜单名称'
          },
          {
            prop: 'router',
            label: '菜单路径'
          },
          {
            prop: 'permission',
            label: '权限标识'
          },
          {
            label: '操作',
            type: 'button',
            width: 150,
            btn: [
              {
                id: 1,
                name: '编辑',
                handler: this.handleEdit
              },
              {
                id: 2,
                name: '删除',
                type: 'danger',
                handler: this.handleDelete
              }
            ]
          }
        ]
      },
      tableData: [],
      // 分页
      pages: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      parentInfo: {
        pid: null,
        pname: null
      }
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {
    this.searchMenu()
    this.treeList()
  },
  methods: {
    // 左侧树
    async treeList () {
      const data = await queryPermissionTree({ clientCode: 1 })
      this.tree.data = data
    },
    handleNodeClick (node) {
      this.parentInfo.pid = node.id
      this.parentInfo.pname = node.name
      this.searchParams.pId = node.id
      this.searchMenu(true)
    },
    // 搜索菜单
    async searchMenu (clearPage = false) {
      if (clearPage) {
        this.pages.page = 1
        this.pages.pageSize = 10
      }
      const params = {
        ...this.pages,
        ...this.searchParams
      }
      const { list, total } = await menuPage(_.pickBy(params))
      this.tableData = list
      this.total = total
    },
    // 重置
    resetMenu () {
      this.searchParams.name = null
      this.searchParams.pId = null
      this.searchMenu(true)
    },
    resetMenuAndTree () {
      this.resetMenu(true)
      this.treeList()
    },
    // 新增菜单
    addMenu () {
      this.$refs.menuInfo.isShow(this.parentInfo)
    },
    // 编辑菜单
    handleEdit (e, row) {
      this.$refs.menuInfo.isShow(row, true)
    },
    // 删除菜单
    handleDelete (e, row) {
      this.$confirm('此操作将删除菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await deleteMenu({ ids: row.id })
        this.resetMenuAndTree()
      }).catch(() => {
        row.isHot = !row.isHot
      })
    },
    // 条数
    handleSizeChange (val) {
      this.pages.pageSize = val
      this.searchMenu()
    },
    // 页数
    handleCurrentChange (val) {
      this.pages.page = val
      this.searchMenu()
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
